<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta name="format-detection" content="telephone=no" />
    <meta name="format-detection" content="email=no" />
    <title>异型钢租售</title>
    <link rel="stylesheet" href="../../css/api.css">
    <link rel="stylesheet" href="../../css/vant.css">
    <link rel="stylesheet" href="../../css/main.css">
    <link rel="stylesheet" href="../../css/mobileSelect.css">

    <style>
    
        .right>div:first-child {
            width: 100%;
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
        }

        .deformed_steel_list {
            border-radius: 8px;
            margin: 12px;
            background-color: #ffffff;
            padding: 0 12px;
        }

        .deformed_steel_list-item {
            display: flex;
            flex-direction: row;
            height: 104px;
            align-items: center;
            border-bottom: 1px solid #eeeeee;
        }

        .deformed_steel_list-item .left {
            position: relative;
        }

        .deformed_steel_list-item .left .img-goods {
            width: 80px;
            height: 80px;
            border-radius: 4px;
        }

        .deformed_steel_list-item .left .type-sign {
            color: #ffffff;
            font-size: 12px;
            position: absolute;
            top: 0;
            right: 0;
            z-index: 100;
            background-color: #FF6010;
            border-bottom-left-radius: 2px;
            border-top-right-radius: 4px;
        }

        .deformed_steel_list-item .right {
            padding: 0 12px 12px 12px;
            width: 100%;
        }

        .deformed_steel_list-item .title {
            color: #333333;
            font-size: 16px;
            line-height: 22px;
        }

        .deformed_steel_list-item .spec {
            color: #999999;
            font-size: 14px;
            line-height: 18px;
            margin-top: 8px;
        }

        .deformed_steel_list-item .bottom {
            flex-direction: row;
            display: flex;
            justify-content: space-between;
            margin-top: 8px;
        }

        .deformed_steel_list-item .shop-iden {
            color: #FF6010;
            font-size: 12px;
            background-color: #FFECE3;
            border-radius: 2px;
            line-height: 16px;
            padding: 0 2px;
        }

        .deformed_steel_list-item .distance {
            color: #999999;
            font-size: 14px;
        }
    </style>
</head>

<body>
    <div class="app" v-cloak>
        <!--列表-->
        <div class="deformed_steel_list" v-if="warehouseList&&warehouseList.length>0">
            <div class="deformed_steel_list-item" v-for="(item,index) in warehouseList" @click="goPage(0,item)">
                <div class="left">
                    <img class="img-goods" v-lazy="item.imageUrl?item.imageUrl:'https://zzzzkj.oss-cn-shanghai.aliyuncs.com/static/tiexie/app/image/image/default/item_img.png'"
                        alt="">
                    <div class="type-sign">出租</div>
                </div>
                <div class="right">
                    <div class="title">标题</div>
                    <div class="spec">规格3020</div>
                    <div class="bottom">
                        <div class="shop-iden">商家认证</div>
                        <div class="distance">1.1km</div>
                    </div>
                </div>
            </div>
            <div class="no-more" v-if="!hasNext">没有更多了</div>
        </div>
        <div v-else class="collect-empty">
            <img src="https://zzzzkj.oss-cn-shanghai.aliyuncs.com/static/tiexie/app/image/image/empty/empty.png" alt="">
            <div>暂无内容～</div>
        </div>
        <div class="peijianshangcheng">
            <div class="release" id="editPage" @click="goEditPage">
                <div class="release-icon"></div>
                <div class="release-text">发布</div>
            </div>
        </div>
        <van-popup v-model="show" position="right" :style="{ height: '100%',width:'77%' }">
            <div class="screen-condition">
                <div>{{conditionName}}</div>
                <div class="screen-condition-list flex-x-s flex-wrap">
                    <div class="screen-condition-item" v-for="(item,index) in conditionList" :key="index"
                        :class="{active:index == conditionCurIndex}" @click="selectCondition(index,item)">{{item.val ||
                        item.name}}</div>
                </div>
            </div>
            <div class="screen-confirm" @click="confirm">确定</div>
        </van-popup>
    </div>
    <script src="../../script/api.js"></script>
    <script src="../../script/flexible.js"></script>
    <script src="../../script/fastclick.js"></script>
    <script src="../../script/vue.min.js"></script>
    <script src="../../script/iconfont.js"></script>
    <script src="../../script/vant.min.js"></script>
    <script src="../../script/common.js"></script>
    <script src="../../script/restful.js"></script>
    <script src="../../script/businessCommon.js"></script>
    <script src="../../script/vue-lazyload.js"></script>
    <script src="../../script/mobileSelect.js"></script>
    <script>
        apiready = function () {
            vm = new Vue({
                el: '.app',
                data: {
                    hasNext: true,
                    active: 0,
                    headerH: 0,
                    footerH: 0,
                    warehouseList: [],

                    queryInfo:
                        { "departureAreaIds": [], "destinationAreaIds": [], "goodsTypeIds": [], "ids": [], "keyword": "", "location": "121.322771,31.290213", "maxWeight": "", "minWeight": "", "orderBy": "", "types": "", "pageNum": 1, "pageSize": 10, "status": 1 },
                    //  {
                    //         type: "0",
                    //         departureAreaIds: [],
                    //         destinationAreaIds: [],
                    //         goodsTypeIds: [],
                    //         ids: [],
                    //         keyword: "",
                    //         location: "",
                    //         maxWeight: "",
                    //         minWeight: "",
                    //         orderBy: "",
                    //         types: "",
                    //         pageNum: 1,
                    //         pageSize: 10,
                    //         status: 1
                    //     },

                    wxList: ['地区', '类型', '最新', '分类'],
                    typeList: [
                        {
                            imgNormal: '',
                            imgSelect: '',
                            name: '全部'
                        },
                        {
                            imgNormal: '',
                            imgSelect: '',
                            name: 'H型钢'
                        },
                        {
                            imgNormal: '',
                            imgSelect: '',
                            name: '拉森钢'
                        },
                        {
                            imgNormal: '',
                            imgSelect: '',
                            name: '钢支撑'
                        },
                        {
                            imgNormal: '',
                            imgSelect: '',
                            name: '岗位檀'
                        }
                    ],


                    show: false,
                    conditionCurIndex: 0,
                    conditionList: [],
                    conditionName: '类型',
                    conditionIndexObj: {
                        typeIndex: 0,
                        orderIndex: 0,
                        categoryIndex: 0,
                    },
                    conditionCurItem: {}, //选中的项
                    objectOption: {
                        listType: [{ id: '-1', val: '全部' }, { id: '0', val: '出租' }, { id: '1', val: '出售' }],// 类型
                        // listOrder: [{ id: '-1', val: '综合排序' }, { id: '0', val: '离我最近' }, { id: '-1', val: '最新发布' }], // 排序
                        listCategory: [
                            { id: '-1', val: '全部' },
                            { id: '-1', val: 'H型钢' }
                            , { id: '-1', val: '拉森钢' }
                        ]
                    },
                },
                filters: {
                    getMinDistance: function (item) {
                       // var location = $api.getStorage('location_home')
                        var location = api.getPrefs({
                            sync: true,
                            key: 'location_home'
                        })||{}

                        location = JSON.parse(myLocation).location.split(',')
                        var departureLocation = item.departureLocation;
                        if (departureLocation == null) return 0;
                        var distance = getDistance(departureLocation.lat, departureLocation.lon,
                            location[1], location[0]);
                        return distance;
                    },
                    filterDistance(val) {
                        val = val / 1000
                        if (val > 500) {
                            return '500km以上'
                        } else {
                            return val.toFixed(1) + 'km'
                        }
                    }
                },
                mounted() {
                    var header = $api.dom('.header-common');
                    this.headerH = $api.fixStatusBar(header);
                    console.log(this.headerH)
                    this.initLogistically();
                },

                methods: {
                    selectCondition(index, item) {
                        this.conditionCurIndex = index
                        this.conditionCurItem = item
                    },
                    goPage() {
                        // var title = "";
                        // if (this.active == 0) {
                        //     title = "WULIU"
                        // } else if (this.active == 1) {
                        //     title = "STORAGE"
                        // }
                        api.openWin({
                            name: 'search_win',
                            url: '../search/search_win.html',
                            bounces: false,
                            pageParam: {
                                isHistory: false,
                                title: "",
                                titlePlus: '二手材料'
                            }
                        });
                    },
                    back() {
                        api.closeWin();
                    },


                    /**
            * 初始化物流列表
            */
                    initLogistically: function () {
                        var vm = this;
                        // vm.queryInfo.type = vm.title;
                        index.logistically("getLogisticsList")(vm.queryInfo, function (ret) {
                            let resData = ret.data.list;
                            console.log('物流：', JSON.stringify(resData));
                            resData.map(item => {
                                if (item.imageUrl) {
                                    item.imageUrl = item.imageUrl.replace(/_[0-9x]+(\.[a-z]{3})$/, '$1')
                                }
                            })
                            const kfUrlMap = new Map();
                            vm.hasNext = ret.data.hasNext;
                            if (vm.queryInfo.pageNum == 1) {
                                vm.warehouseList = resData;
                            } else {
                                vm.warehouseList = vm.warehouseList.concat(resData);
                            }
                        });
                    },

                    confirm() {
                        var item = this.conditionCurItem
                        // if (this.wxIndex == 0) {
                        //     this.objectParam.typeIds = []
                        //     this.conditionIndexObj.storeIndex = this.conditionCurIndex
                        //     if (item.id > 0) this.objectParam.typeIds.push(item.id)
                        // } else if (this.wxIndex == 1) {
                        //     this.objectParam.tagIds = []
                        //     this.conditionIndexObj.serveIndex = this.conditionCurIndex
                        //     if (item.id > 0) this.objectParam.tagIds.push(item.id)
                        // } else if (this.wxIndex == 2) {
                        //     return false;
                        // } else if (this.wxIndex == 3) {
                        //     this.objectParam.maxDistance = ''
                        //     this.conditionIndexObj.distanceIndex = this.conditionCurIndex
                        //     if (item.id >= 0)  this.objectParam.maxDistance = parseInt(item.distance)
                        // }
                        this.objectParam.pageNum = 1
                        // this.listMaintenance = []
                        // this.getData()
                        this.show = false
                    },

                    goEditPage: function (editName) {
                        if (!checkToken()) return false;
                        if (vm.authStatus.merchant == 1 || vm.authStatus.personal == 1) {
                            api.openWin({
                                name: 'release_edit_win',
                                url: '../release/release_edit_win.html',
                                bounces: false,
                                pageParam: {
                                    editName: editName,
                                    status: 'edit'
                                }
                            });
                        } else {
                            toastMiddle('认证通过后才可进行发布')
                        }
                    },

                    select(index) {
                        if (index == 0) {
                            api.openWin({
                                name: 'area_select_win',
                                url: '../select/area_select_win.html',
                                bounces: false,
                                pageParam: {
                                    key: 'value'
                                }
                            });
                            return false;
                        } else if (index == 1) {
                            this.conditionCurIndex = this.conditionIndexObj.typeIndex
                            this.conditionName = '类型'
                            this.conditionList = this.objectOption.listType
                        } else if (index == 2) {
                            // this.conditionCurIndex = this.conditionIndexObj.orderIndex
                            // this.conditionName = '排序'
                            // this.conditionList = this.objectOption.listStore
                            return false;

                        } else if (index == 3) {
                            this.conditionCurIndex = this.conditionIndexObj.categoryIndex
                            this.conditionName = '分类'
                            this.conditionList = this.objectOption.listCategory
                        }
                        // this.wxIndex = index
                        this.show = true
                    }
                },
            })

            api.addEventListener({
                name: 'filterDistrict'
            }, function (ret, err) {
                console.log(JSON.stringify(ret))
                vm.objectParam.areaIds = []
                if (ret.value.city.id > 0) vm.objectParam.areaIds = [ret.value.city.id]
                vm.objectParam.pageNum = 1
                // vm.getData()
            });
            api.addEventListener({
                name: 'showFilterBox'
            }, function (ret, err) {
                vm.select(ret.value.index)
            });
            // 下拉刷新
            api.setRefreshHeaderInfo({
                bgColor: '#f7f7f7',
                textDown: '下拉更新有惊喜',
                textUp: '松开可以刷新'
            }, function (ret, err) {
                // vm.listMaintenance = []
                vm.objectParam.pageNum = 1
                // vm.getData();
            });
            // 上拉加载
            api.addEventListener({
                name: 'scrolltobottom',
                extra: {
                    threshold: -10
                }
            }, function (ret, err) {
                console.log('加载');
                if (vm.hasNext) {
                    vm.objectParam.pageNum++
                    // vm.getData();
                }
            });
            api.addEventListener({
                name: 'login'
            }, function (ret, err) {
                vm.getAuthorizationStatus()
            })
        }
    </script>
</body>

</html>